import React from 'react';
import MiniBar from './MiniBar';
import MiniBarTableStyle from './MiniBarTable.less';

export default class MiniBarTable extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }

  render() {
  	let { data } = this.props;
  		data =[['哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',12,34,56,78],
		  		['哈哈哈哈',12,34,56,78],
		  		['哈哈哈哈',12,34,56,78],
		  		['哈哈哈哈',12,34,56,78]];
	let table = data.map((item, index)=>{
		return (<div key={index} className='row'>
					<span className='leftTable leftHeader'>{item[0]}</span>
					<span className='leftTable'><MiniBar width={`${item[1]}%`}/></span>
					<span className='leftTable'><MiniBar width={`${item[2]}%`} color={'#fcc622'}/></span>
					<span className='rightTable'><MiniBar width={`${item[4]}%`} color={'#fcc622'}/></span>
					<span className='rightTable'><MiniBar width={`${item[3]}%`}/></span>
				</div>)
	});
    return (
      <div className={MiniBarTableStyle.miniBarTable}>
      	<div className='tittle'><span className='leftTable leftHeader'></span><span className='xxl'>训练量</span><span className='zql'>正确率</span></div>
	    <div className='header'>
		    <span className='leftTable leftHeader'></span>
		    <span className='leftTable topHeader'><b>从高到低</b></span>
			<span className='leftTable topHeader'><b>从高到低</b></span>
			<span className='rightTable topHeader'><b>从高到低</b></span>
			<span className='rightTable topHeader'><b>从高到低</b></span>
		</div>
      	{table}
      </div>
    );
  }
}
